<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=YmT7XzL4O9IplhNmNo93NwlgwH9PF19U"></script>
  <script src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
    <link rel="stylesheet" href="/css/initialize.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/js/echarts.min.js"></script>
    <script src="/theme/light.js"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/index.js"></script>
    <title> 武汉轻工大学智联环境监测系统</title>
</head>
<body>
    <div class="chart-warp">
        <div class="head-view">
            <div class="head-text">
                武汉轻工大学智联环境监测系统
                <div class="head-text view_line" style="left: 36px;">
                    <div class="head_text_view" ></div>
                </div>
                <div class="head-text view_line" style="left: 50px;">
                    <div class="head_text_view"></div>
                </div>
                <div class="head-text view_line" style="right: 16px;">
                    <div class="head_text_view"></div>
                </div>
                <div class="head-text view_line" style="right: 30px;">
                    <div class="head_text_view"></div>
                </div>
            </div>
            <div class="screen"></div>
        </div>
        <div class="content-warp">
            <div class="left-show">

                <div class="left-content ">
                    <div class="left_title"> 渗漏预警</div>
                    <div class="left_line1" id="left_part1"></div>
                    <div class="border-t_l corner"></div>
                    <div class="border-t_r corner"></div>
                    <div class="border-b_l corner"></div>
                    <div class="border-b_r corner"></div>
                </div>
                <div class="left-content">
                    <div class="left_title"> 水位预警</div>
                    <div class="left_title_tip">
                        <marquee behavior="scroll" direction="left" id="water_bar_tip"></marquee>
                    </div>
                    <div class="left_bar1" id="left_part2"></div>
                    <div class="border-t_l corner"></div>
                    <div class="border-t_r corner"></div>
                    <div class="border-b_l corner"></div>
                    <div class="border-b_r corner"></div>
                </div>
                
            </div>
            <div class="center-show">
                <div class="center-content center-title">
                    <marquee behavior="scroll" direction="left" scrollamount="15">
                            <span style="color: Lime;"> 正常监测点 ：8个 </span>
                            <span style="color: orange;"> 疑似异常点:1个 </span>
                            <span style="color: red;"> 异常监测点 :1个 </span>
                    </marquee>
                </div>
                <div class="center-content center-content-bottom" id="allmap">
                    <div class="border-t_l corner"></div>
                    <div class="border-t_r corner"></div>
                    <div class="border-b_l corner"></div>
                    <div class="border-b_r corner"></div>
                </div>
            </div>
            <div class="right-show">
                <div class="right-content" >
                    <div class="right_title" >土壤成分监测</div>
                    <div class="right_part_tip" style="color:lime"> 土壤状况：优</div>
                    <div class="right_pie1" id="right_part1"></div>
                    <div class="border-t_l corner"></div>
                    <div class="border-t_r corner"></div>
                    <div class="border-b_l corner"></div>
                    <div class="border-b_r corner"></div>
                </div>
                
                <div class="right-content display_btn">
                    <div class="right_title" >水体成分监测</div>
                    <div class="right_part_tip" style="color:lime" id="level">水质状况：良好</div>
                    <div class="right_pie2" id="right_part2"></div>
                    <div class="btn_bg">
                        <div class="turnLeft" id="turnLeft"></div>
                    </div>
                    <div class="btn_bg" style="right: 0;">
                        <div class="turnRight" id="turnRight"></div>
                    </div>
                    <div class="border-t_l corner"></div>
                    <div class="border-t_r corner"></div>
                    <div class="border-b_l corner"></div>
                    <div class="border-b_r corner"></div>
                </div>
                <div class="right-content">
                    <div class="right_title" >空气环境监测</div>
                    <div class="right_part_tip" style="color:rgb(0, 195, 255)">空气质量：良</div>
                    <span class="box_title">监测项目&nbsp;&nbsp;</span><span class="box_title" style="position: absolute; left: 290px;">当前值</span>
                    <div class="right_part3" id="">
                        <div class="box"><span class="orderNum">1</span><span class="environment">温度</span><span class="val">5℃</span></div>
                        <div class="box"><span class="orderNum">2</span><span class="environment">湿度</span><span class="val">4RH%</span></div>
                        <div class="box"><span class="orderNum">3</span><span class="environment">光照</span><span class="val">30lx</span></div>
                        <div class="box"><span class="orderNum">4</span><span class="environment">风力</span><span class="val">3级</span></div>
                    
                    <div class="border-t_l corner"></div>
                    <div class="border-t_r corner"></div>
                    <div class="border-b_l corner"></div>
                    <div class="border-b_r corner"></div>
                </div>
            </div>
        </div>
        
    </div>
</body>
</html>